<template>
  <view>
    <view class="huilv-wrap">
      <view class="huilv">
        <view class="title">
          <text>实时汇率</text>
        </view>
        <view class="item dashed">
          <view class="left">
            <image src="../../../static/images/home_slices/usd-icon.png"></image>
            <text class="text1 fs32">美元</text>
            <text class="text2 fs32 c7">USD</text>
          </view>
          <view class="right">
            <text class="fs44">1</text>
          </view>
        </view>
        <view class="item">
          <view class="left">
            <image src="../../../static/images/home_slices/cny-icon.png"></image>
            <text class="text1 fs32">人民币</text>
            <text class="text2 fss32 c7">CNY</text>
          </view>
          <view class="right">
            <text class="fs44">6.7425</text>
          </view>
        </view>
        <view class="btn">
          <view class="item">预约充值</view>
          <view class="item">立即充值</view>
        </view>
      </view>
    </view>
    <view class="middle">
      <view class="grad"></view>
      <text class="text fs32">交易</text>
      <view class="grad"></view>
    </view>
    <view class="grace-tab">
      <scroll-view class="grace-tab-title" scroll-x="true">
        <view
          v-for="(tab, index) in tabs"
          :class="[tabCurrentIndex == index ? 'grace-tab-current' : '']"
          :id="'tabTag-'+index"
          @tap="tabChange"
          :key="index"
        >{{tab.name}}</view>
      </scroll-view>
      <swiper
        class="grace-tab-swiper"
        :current="swiperCurrentIndex"
        @change="swiperChange"
        style="height:430upx;"
      >
        <swiper-item class="bg-c1">
          <view class="title">
            <view class="dot"></view>
            <text class="text1 fs24">近一月涨幅：</text>
            <text class="text2 fs24">-1.55%</text>
          </view>

          <view class="echartsIn">
            <mpvue-echarts :echarts="echarts" :onInit="lineInit1" canvasId="line1"/>
          </view>
        </swiper-item>

        <swiper-item class="bg-c1">
          <view class="title">
            <view class="dot"></view>
            <text class="text1 fs24">近一月涨幅：</text>
            <text class="text2 fs24">-1.55%</text>
          </view>

          <view class="echartsIn">
            <mpvue-echarts :echarts="echarts" :onInit="lineInit2" canvasId="line2"/>
          </view>
        </swiper-item>
      </swiper>
    </view>
    <view class="update-msg">
      <text class="fs24">数据更新于2019-01-01</text>
    </view>
    <view class="btn-wrap">
      <view class="item">买入</view>
      <view class="item">卖出</view>
    </view>
  </view>
</template>

<script>
import * as echarts from "../../../graceUI/threeComponents/echarts/echarts.min";
import mpvueEcharts from "../../../graceUI/threeComponents/echarts/echarts";
function getLineOption1() {
  return {
    animation: false,
    color: ["#E5CA6F"],
    legend: {
      data: ["K线"]
    },
    grid: {
      x: 35,
      x2: 10,
      y: 10,
      y2: 90
    },
    calculable: false,
    xAxis: [
      {
        type: "category",
        data: ["2019.01", "2019.02", "2019.03", "2019.04", "2019.05", "2019.06"]
      }
    ],
    yAxis: [
      {
        type: "value",
        splitLine: {
          show: true,
          lineStyle: {
            color: "#999",
            type: "dashed"
          }
        }
      }
    ],
    series: [
      {
        name: "蒸发量",
        type: "line",
        data: [188.0, 206.0, 84.0, 252.0, 200.0]
      }
    ]
  };
}
function getLineOption2() {
  return {
    animation: false,
    color: ["#E5CA6F"],
    legend: {
      data: ["K线"]
    },
    grid: {
      x: 35,
      x2: 10,
      y: 10,
      y2: 90
    },
    calculable: false,
    xAxis: [
      {
        type: "category",
        data: ["2019.01", "2019.02", "2019.03", "2019.04", "2019.05", "2019.06"]
        // .map(function(str) {
        //   return str.replace(" ", "\n");
        // })
      }
    ],
    yAxis: [
      {
        type: "value",
        splitLine: {
          show: true,
          lineStyle: {
            color: "#999",
            type: "dashed"
          }
        }
      }
    ],
    series: [
      {
        name: "蒸发量",
        type: "line",
        data: [188.0, 206.0, 840.0, 252.0, 200.0]
      }
    ]
  };
}
export default {
  components: {
    mpvueEcharts
  },
  data() {
    return {
      tabCurrentIndex: 0,
      swiperCurrentIndex: 0,
      tabs: [
        { name: "美元兑阿币", id: "ab" },
        { name: "阿币兑美元", id: "usd" }
      ],
      echarts,
      lineInit1: function(canvas, width, height) {
        // console.log(JSON.stringify(canvas));

        let lineChart1 = echarts.init(canvas, null, {
          width: width,
          height: height
        });
        canvas.setChart(lineChart1);
        lineChart1.setOption(getLineOption1());
        return lineChart1;
      },
      lineInit2: function(canvas, width, height) {
        let lineChart2 = echarts.init(canvas, null, {
          width: width,
          height: height
        });
        canvas.setChart(lineChart2);
        lineChart2.setOption(getLineOption2());
        return lineChart2;
      }
    };
  },
  methods: {
    tabChange: function(e) {
      var index = e.target.id.replace("tabTag-", "");
      this.swiperCurrentIndex = index;
      this.tabCurrentIndex = index;
    },
    swiperChange: function(e) {
      var index = e.detail.current;
      this.tabCurrentIndex = index;
    }
  }
};
</script>

<style lang="scss" scoped>
@import "../../../styles/global/index";
.grace-tab-swiper {
  height: 340upx;
}
.grace-tab-title {
  border-bottom: 1px solid #ddd !important;
}
.grace-tab-current {
  border-bottom: 6upx solid #5299f7 !important;
  color: #5299f7 !important;
}
swiper-item {
  background: #f3f4f5;
  line-height: 350upx;
  text-align: center;
  font-size: 36px;
  color: red;
  .title {
    text-align: left;
    display: flex;
    align-items: center;
    padding-left: 40upx;
    margin-top: 18upx;
    .dot {
      @include size(12upx, 12upx);
      border-radius: 50%;
      background: #227df4;
    }
    .text1 {
      color: #959698;
      padding-left: 20upx;
    }
    .text2 {
      color: #3ea108;
    }
  }
}
.huilv-wrap {
  background: #fff;
  @include size(100%, 494upx);
  padding-top: 30upx;
  .huilv {
    @include size(690upx, 480upx);
    border-radius: 12upx;
    margin: 0 auto;
    box-shadow: rgba(0, 0, 0, 0.1) 0upx 2upx 20upx;
    .title {
      height: 66upx;
      line-height: 66upx;
      background: #5299f7;
      border-top-left-radius: 12upx;
      border-top-right-radius: 12upx;
      text {
        color: #fff;
        padding-left: 30upx;
      }
    }
    .dashed {
      border-bottom: 1upx dashed #ddd;
    }
    .item {
      height: 140upx;
      padding: 0 20upx;
      @include flex-bw;
      .left {
        display: flex;
        align-items: center;
        .text1 {
          padding: 0 10upx 0 18upx;
        }
      }
      image {
        @include size(60upx, 60upx);
      }
    }
    .btn {
      margin-top: 20upx;
      @include flex-center;
      .item {
        @include size(180upx, 64upx);
        @include flex-center;
        color: #fff;
        border-radius: 10upx;
        &:nth-child(1) {
          margin-right: 60upx;
          background: #5299f7;
        }
        &:nth-child(2) {
          border: 1upx solid #5299f7;
          color: #5299f7;
        }
      }
    }
  }
}
.middle {
  height: 90upx;
  border-bottom: 1upx solid #ddd;
  background: #fff;
  @include flex-center;
  .grad {
    height: 7upx;
    width: 30upx;
    background: linear-gradient(
      to right,
      rgb(240, 229, 229),
      rgb(184, 187, 196)
    ); /* 标准的语法（必须放在最后） */
    &:nth-child(3) {
      background: linear-gradient(
        to left,
        rgb(240, 229, 229),
        rgb(184, 187, 196)
      ); /* 标准的语法（必须放在最后） */
    }
  }
  .text {
    padding: 0 20upx;
  }
}
.update-msg {
  display: flex;
  flex-direction: row-reverse;
  padding: 26upx 28upx 0 0;
  color: #7f7f7f;
}
.btn-wrap {
  margin-top: 20upx;
  @include flex-center;
  padding: 0 28upx;
  .item {
    @include size(330upx, 74upx);
    border-radius: 10upx;
    @include flex-center;
    &:nth-child(1) {
      background: #5299f7;
      margin-right: 30upx;
    }
    &:nth-child(2) {
      border: 1upx solid #5299f7;
      color: #5299f7;
    }
  }
}
</style>